<!--
 * @Author: 15097322811 1447934599@qq.com
 * @Date: 2024-01-26 10:24:19
 * @LastEditors: 15097322811 1447934599@qq.com
 * @LastEditTime: 2024-02-04 16:39:44
 * @Description: 
-->
<template>
  <view>
    <view class="screen_view">
      <!-- #ifndef H5 -->
      <view
        class=""
        style="height: 50px"></view>
      <!-- #endif -->
      <view class="search">
        <view
          class="arrow"
          @click="backPath">
          <u-icon
            :size="40"
            name="arrow-left" />
        </view>
        <view
          class="box"
          @click="backPath">
          <view class="left">
            <u-icon name="search" /> <text class="text">{{ keyword }}</text>
          </view>
        </view>
      </view>
      <view class="saixuan">
        <view class="mybi">
          {{$t('我的幸运币')}}
          <text>{{ luckyCoin }}</text>
        </view>
        <view class="screen_assembly">
          <view class="nav">
            <u-tabs
              v-if="!downIcon"
              :list="goods_navlist"
              bg-color=""
              active-color="#01E0DB"
              inactive-color="#698286"
              :is-scroll="true"
              :current="current"
              :font-size="25"
              :show-bar="true"
              @change="change"></u-tabs>
            <view
              class="text"
              v-if="downIcon"
              >{{$t('幸运币区间')}}</view
            >
          </view>
          <view
            class="down_view"
            v-if="!downIcon"
            @click="downExpand">
            <u-icon
              name="arrow-down-fill"
              size="30" />
          </view>
          <view
            class="down_view"
            v-if="downIcon"
            @click="downClose">
            <u-icon
              name="arrow-up-fill"
              size="30" />
          </view>
        </view>
      </view>
    </view>
    <view class="interval"></view>
    <view
      class="goodsList"
      v-if="goodsList.length > 0">
      <view
        class="list"
        v-for="(item, idx) in goodsList"
        :key="idx"
        @click="details(item.id)">
        <view>
          <image
            :src="item.image"
            mode=""></image>
        </view>
        <view class="info">
          <view class="tit">
            {{ item.title }}
          </view>
          <view class="price-info">
            <view class="price">
              {{$t('¥')}}
              <text style="font-size: 34rpx">{{
                (item.price * 1).toFixed(0)
              }}</text>
            </view>
            <view class="bi">{{ item.integral }}{{$t('幸运币')}}</view>
          </view>
        </view>
      </view>
    </view>
    <u-empty
      v-else
      :text="$t('没有搜索结果')"
      mode="search"></u-empty>
    <uni-popup
      ref="screenPopup"
      type="top">
      <view class="screenPopup">
        <view
          class="item"
          v-for="(navItem, index) in goods_navlist"
          :key="index"
          @click="navPopup(navItem.id)">
          {{ navItem.name }}
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods_navlist: [],
      current: null,
      height: "67",
      goodsList: [],
      page: 1,
      luckyCoin: "",
      keyword: "", //搜索值
      price_id: "",
      downIcon: false,
      option: null,
    };
  },
  // 触底
  onReachBottom() {
    if (this.goodsList.length < this.page * 10) {
      return;
    }
    this.page++;
    this.getGoodsList();
  },
  onLoad(option) {
    this.keyword = option.keyword;
    this.option = option;
  },
  onShow() {
    this.getNavList();
    this.getLuckyCoin();
  },
  methods: {
    //获取幸运币区间
    getNavList() {
      this.$http({
        url: "api/common/get_price ",
        data: {},
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.goods_navlist = res.data.data.map((item) => {
              if (item.end_price == 0) {
                return {
                  name: `${item.start_price}`,
                  id: item.id,
                };
              } else {
                return {
                  name: `${item.start_price}-${item.end_price}`,
                  id: item.id,
                };
              }
            });
            let obj = {
              name: this.$t("综合"),
              id: "",
            };
            this.goods_navlist.unshift(obj);
            uni.showToast({
              title: this.goods_navlist,
              icon: "none",
            });
            //从商城页进入
            if (this.option.navIndex) {
              this.current = Number(this.option.navIndex);
              this.price_id = this.goods_navlist[this.option.navIndex].id;
            } else {
              this.current = 0;
              this.price_id = "";
            }
            this.page = 1;
            this.goodsList = [];
            this.getGoodsList();
          }
        })
        .catch((err) => {});
    },
    //查询商品列表
    getGoodsList() {
      this.$http({
        url: "api/common/get_goods_list",
        data: {
          page: this.page,
          title: this.keyword,
          price_id: this.price_id,
        },
      })
        .then((res) => {
          if (res.data.code == 1) {
            var data = res.data.data;
            this.goodsList = this.goodsList.concat(data);
          }
        })
        .catch((err) => {});
    },
    // 获取幸运币
    getLuckyCoin() {
      this.luckyCoin = uni.getStorageSync("user").integral;
    },
    downExpand() {
      this.downIcon = !this.downIcon;
      this.$refs.screenPopup.open();
    },
    downClose() {
      this.downIcon = !this.downIcon;
      this.$refs.screenPopup.close();
    },
    navPopup(id) {
      this.downIcon = !this.downIcon;
      this.price_id = id;
      this.page = 1;
      this.goodsList = [];
      this.getGoodsList();
      this.$refs.screenPopup.close();
    },
    change(idx) {
      this.current = idx;
      this.price_id = this.goods_navlist[idx].id;
      this.page = 1;
      this.goodsList = [];
      this.getGoodsList();
    },
    details(id) {
      uni.navigateTo({
        url: "/pages/mall/goodsInfo?id=" + id,
      });
    },
    //返回
    backPath() {
      uni.navigateBack({
        delta: 1, //返回层数，2则上上页
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// @import url("../../static/css/mall.css");
.screen_view {
  font-family: "Microsoft Yahei";
  width: 100%;
  // height: 255rpx;
  overflow: hidden;
  position: fixed;
  z-index: 100;
  background-color: #fff;
  border-bottom: 1rpx solid #dedfe2;
  .search {
    //#ifndef MP-WEIXIN
    width: 100%;
    //#endif
    //#ifdef MP-WEIXIN
    width: 78%;
    //#endif
    padding: 0 20rpx 0 0;
    display: flex;
    margin: 20rpx 0;
    align-items: center;

    .arrow {
      display: inline-block;
      width: 100rpx;
      text-align: center;
    }
    .box {
      width: 100%;
      height: 70rpx;
      background-color: #e2e2e2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10rpx;
      border-radius: 5rpx;
      box-sizing: border-box;
      .left {
        margin-left: 10rpx;
        .text {
          margin-left: 10rpx;
        }
      }
    }
  }
  .saixuan {
    padding-top: 10rpx;
    .mybi {
      margin-left: 20rpx;
      color: #698286;
      text {
        margin-left: 20rpx;
        font-weight: bold;
        font-size: 34rpx;
        color: #000;
      }
    }
    .screen_assembly {
      display: flex;
      .nav {
        width: calc(100% - 90rpx);
        margin-top: 10rpx;
        height: 85rpx;
        .text {
          text-align: left;
          line-height: 85rpx;
          margin-left: 25rpx;
          font-weight: bold;
        }
        /deep/.u-tabs-scorll-flex {
          justify-content: flex-start;
          gap: 25rpx;
        }
        /deep/.u-tab-item {
          flex: none !important;
          width: auto !important;
        }
      }
      .down_view {
        width: 90rpx;
        height: 85rpx;
        line-height: 85rpx;
        text-align: center;
        background-color: #fff;
        align-self: center;
      }
    }
  }
}
.interval {
  height: 345rpx;
}
.goodsList {
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 690rpx;
  box-sizing: border-box;
  margin: 20rpx auto;
  z-index: 10;
  .list {
    margin-bottom: 20rpx;
    width: 330rpx;
    box-sizing: border-box;
    background-color: #fff;
    image {
      width: 330rpx;
      height: 330rpx;
    }
    .info {
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      .tit {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 26rpx;
        line-height: 26rpx;
        font-size: 26rpx;
      }
      .price {
        font-weight: bold;
        font-size: 24rpx;
        color: #cb5967;
      }
      .bi {
        font-size: 18rpx;
        color: #6c6c6c;
        padding-bottom: 6rpx;
        line-height: 24rpx;
        height: 24rpx;
      }
    }
    .price-info {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 16rpx 0 20rpx 0;
    }
  }
}
/deep/ .u-empty {
  margin: 250rpx 0 0 0 !important;
}
.screenPopup {
  width: 100%;
  height: 210rpx;
  background-color: #fff;
  display: flex;
  flex-flow: wrap;
  gap: 15rpx;
  // margin: 255rpx 0 0 0;
  margin: calc(255rpx + 50px) 0 0 0;
  padding: 20rpx;
  .item {
    width: 160rpx;
    height: 75rpx;
    line-height: 75rpx;
    text-align: center;
    background-color: #f4f3f8;
  }
}
</style>
